<template>
  <view>
    <tm-message ref="toast"></tm-message>
    <view>
      <tm-form @submit="onSubmit" ref="formData">
        <tm-input placeholder="请输入用户名" v-model.lazy="pwdLoginForm.username" confirm-type="next"
                  :vertical="true" :bg-round="25" :bg-shadow="2" flat prefixp-icon="icon-user-fill" :padding="[32,0]"
                  height="80" :font-size="32" :color="$tm.vx.state().tmVuetify.color"></tm-input>
        <view class="py-20"></view>
        <tm-input placeholder="请输入密码" clear :password="!passwordSlash" confirm-type="next"
                  v-model.lazy="pwdLoginForm.password" :vertical="true" bg-round="25" bg-shadow="2" flat
                  prefixp-icon="icon-lock" :padding="[32,0]" height="80" :font-size="32"
                  :color="$tm.vx.state().tmVuetify.color">
          <template v-slot:rightBtn>
            <tm-icons size="32" :name="!passwordSlash?'icon-eye-slash':'icon-eye'"
                      style="margin-right: 10px;color:rgb(51, 51, 51);"
                      @click="passwordSlash=!passwordSlash"></tm-icons>
          </template>
        </tm-input>
        <view class="py-20"></view>
        <tm-input placeholder="请输入验证码"
                  maxlength="4"
                  v-model.lazy="pwdLoginForm.captcha" :vertical="true" bg-round="25" bg-shadow="2" flat
                  prefixp-icon="icon-paper-plane" :padding="[32,0]" height="80" :font-size="32"
                  :color="$tm.vx.state().tmVuetify.color">
          <template v-slot:rightBtn>
            <image style="width: 120px;height: 92rpx;margin-top: -4rpx;" :src="codeImage" mode="aspectFill"
                   @click="getCaptcha"/>
          </template>
        </tm-input>
        <view class="py-20"></view>
        <tm-button v-if="isAgreement" @click="onSubmit" block icon="icon-unlock-fill" :round="24" :icon-size="32"
                   :height="100" :font-size="32">登录
        </tm-button>
        <tm-button v-else @click="clickNotAgreement" block icon="icon-unlock-fill" :round="24" :icon-size="32"
                   :height="100" :font-size="32">登录
        </tm-button>
      </tm-form>
    </view>
  </view>
</template>

<script>
import {
  mapActions
} from 'vuex';
import * as api from '../api.js'

export default {
  data() {
    return {
      pwdLoginForm: {
        username: '',
        password: '',
        captcha: ''
      },
      codeImage: '',
      captchaKey: '',
      passwordSlash: false
    }
  },
  props: {
    isAgreement: {
      type: Boolean,
      default: false
    }
  },
  methods: {
    // 未勾选时事件
    clickNotAgreement() {
      this.$refs.toast.show({model: 'quest', label: '请先阅读并同意协议条款'})
    },
    /**
     * 获取验证码
     */
    getCaptcha() {
      if (this.captchaState !== undefined && !this.captchaState) return
      api.getCaptcha().then((ret) => {
        this.pwdLoginForm.captcha = ''
        this.captchaKey = ret.data.key
        this.codeImage = ret.data.image_base
      })
    },
    /**
     * 提交登录
     */ async onSubmit(e) {
      if (!this.pwdLoginForm.username) {
        this.$refs.toast.show({model: 'error', label: '请输入用户名'})
      } else if (!this.pwdLoginForm.password) {
        this.$refs.toast.show({model: 'error', label: '请输入密码'})
      } else if (!this.pwdLoginForm.captcha) {
        this.$refs.toast.show({model: 'error', label: '请输入验证码'})
      } else {
        uni.showLoading({
          title: '登录中...'
        });
        this.$dvadminStore.dispatch('pwdLogin', {
          username: this.pwdLoginForm.username,
          password: this.pwdLoginForm.password,
          captcha: this.pwdLoginForm.captcha,
          captchaKey: this.captchaKey
        }).then(res => {
          uni.reLaunch({
            url: '/pages/index/index'
          });
          this.$refs.toast.show({model: 'success', label: '登录成功'});
        }).catch(err => {
          this.getCaptcha()
        })
      }
    },
    /**
     * 登录成功
     */
    onSuccess(e) {
      console.log(e)
    }
  },
  created() {
    this.getCaptcha()
  }
}
</script>

<style>
</style>
